<!Doctype html>
<html>
<script type="text/javascript" src="./jquery.js"></script>
<link style="text/css" src="./bootstrap.css"></link>
<script type="text/javascript" src="./bootstrap.js"></script>
<script type="text/javascript" src="./mustache.js"></script>

<body>
  <template id="tpl">
    <img src="dummy.png" title="{{title}}"/>
    {{{title}}}
  </template>
  <div id="target">Loading...</div>

  <!-- 获取模板 -->
  <script type="text/javascript">
    var tplEl = document.getElementById('tpl')
    // 通过tplEl.innerText获取也可以
    var tpl = tplEl.innerHTML;
    var x = tplEl.content
    var img = x.querySelector('img')
    console.log(img.src);
    // file:///D:/%E6%8A%80%E6%9C%AF/gitProjects/technical_practice/vue/dummy.png
    console.log(img.getAttribute('src'));
    //dummy.png
    img.src = img.getAttribute('src');
    console.log(img.src);
    // file:///D:/%E6%8A%80%E6%9C%AF/gitProjects/technical_practice/vue/dummy.png
    tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
    Mustache.parse(tpl);
    var rendered = Mustache.render(tpl, {
      title: "<b>test</b>"
    });
    console.info(rendered);
    $('#target').html(rendered);
    console.info('emmet');
  </script>

</body>

</html>
